import React, { Component } from 'react';
import {NavBar,Stepper,Toast ,Checkbox} from 'antd-mobile'
import { DeleteOutline } from 'antd-mobile-icons'
import {shopcart_list,shopcart_sub,shopcart_add,shopcart_clear} from '../api/index'
import '../styles/MyCart.css'
import { withRouter,NavLink } from 'react-router-dom'
import MyTabBar from './MyTabBar';
class MyCart extends Component {
    constructor(props){
        super(props);
        this.state={
            shoplist:[],
            count:1
        }
    }
    componentDidMount(){
        shopcart_list({userid:localStorage.getItem("userid")}).then((res)=>{
            console.log(res.data)
            this.setState({
                shoplist:res.data.list
            })
        })
    }
    back(){
        this.props.history.goBack();
    }
    change(id,value,count){
        this.setState({
            count:value
        })
        console.log(id,value,this.state.count)
        
        if(value>this.state.count){
            shopcart_add({userid:localStorage.getItem("userid"),goodid:id}).then((res)=>{
                console.log("增加",res.data)
            })
        }else if(value<this.state.count){
            shopcart_sub({userid:localStorage.getItem("userid"),goodid:id}).then((res)=>{
                        console.log("减少",res.data)
                    })
        }
    }
    del(){
        shopcart_clear({userid:localStorage.getItem("userid")}).then((res)=>{
            console.log(res.data)
            shopcart_list({userid:localStorage.getItem("userid")}).then((res)=>{
                console.log(res.data)
                this.setState({
                    shoplist:res.data.list
                })
            })
        })
        Toast.show({
            icon: 'success',
            content: '删除成功',
          })
    }
    render() {
        return (
            <div>
                <NavBar onBack={()=>{ this.back() }} right={<DeleteOutline fontSize={30} onClick={()=>{this.del()}}/>} >购物车</NavBar>
                <div className='shop-x'>
                
                    {
                        this.state.shoplist.map((item,index)=>{
                            return(
                                <div className='shop-a' key={index}>
                                <Checkbox>
                                    {item.ischeck}
                                </Checkbox >
                                <img src={item.pic} alt="" />
                                <div className='shop-b'>
                                    <div>{item.name}</div>
                                    <div className='shop-q'>
                                        ￥:{item.salesPrice.value}
                                        <div className='shop-aj'>
                                        <Stepper min={0} max={10} defaultValue={item.count} 
                                        onChange={(value)=>{
                                            this.change(item.id,value,item.count)
                                        }}
                                        />
                                        </div>
                                        <div>{item.salesPrice.value*item.count}</div>
                                    </div>
                                    
                                </div>
                                
                            </div>
                            )
                        })
                    }
                    {
                        this.state.shoplist.length ===0&&<div className="empty">购物车里毛都没有了,快去商城看看吧<NavLink to="/index/cate">去店铺</NavLink>
                        </div>
                    }
                </div>
                <MyTabBar/>
            </div>
        );
    }
}

export default withRouter(MyCart);